<!-- 仓库设置 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仓库设置</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?31231">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div ref="tops">
                <div class="cell_txt">工程编号<span>{{projectId}}</span></div>
                <div class="cell_box">
                    <div class="cell_name">工程名称</div>
                    <div class="cell_cont">{{projectName}}</div>
                </div>
                <div class="title_box">
                    <div class="title_name">仓库明细:</div>
                    <div class="title_but">
                        <div class="file_but">
                            <div style="display: flex;align-items: center;">
                                <el-upload class="upload-demo" action="##" accept="image/*" :show-file-list="false"
                                           :http-request="httprequest">
                                    <el-button v-if="!isupload" class="border_but" type="primary">上传图纸</el-button>
                                    <el-button v-if="isupload" class="border_but" type="primary">重新上传图纸</el-button>
                                </el-upload>
                                <el-button style="margin-left: 20px;" @click="checkList" class="border_but"
                                           type="primary">查看列表</el-button>
                            </div>
                            <div class="icon_type_box">
                                <img style="width: 24px;" src="../img/icon32.png" alt="">
                                <div>仓库</div>
                                <img style="width: 24px;" src="../img/icon22.png" alt="">
                                <div>堆场</div>
                                <img style="width: 19px;" src="../img/icon12.png" alt="">
                                <div>临时堆放点</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail_box" ref="detailbox">
                <div class="file_box" v-if="!isupload">
                    <el-upload class="file_upload-demo" drag action="##" accept="image/*" :show-file-list="false"
                               :http-request="httprequest">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将图纸拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </div>
                <div v-if="isupload" style="width: 100%;height: 100%;border: 1px solid #EBEBEB;">
                    <div class="img_box">
                        <img v-if="!fileData.fileurl"
                             style="position: absolute; left: 50%;transform: translateX(-50%);width: 30px;"
                             src="../img/loading.gif" alt="">
                        <div v-if="!fileData.fileurl"
                             style="position: absolute; top: 106px;left: 50%;transform: translateX(-50%);">正在加载图纸</div>
                        <div class="img_cont" style="width: 100%;" v-if="fileData.fileurl">
                            <div class="img_contan" style="width: 100%;position: relative;">
                                <img id="drawing" :src="fileData.fileurl" alt="">
                                <!-- img上 进行点击事件鼠标移动事件绑定 -->
                                <div @mousemove="mousemoves" @click="tabImg"
                                     style="position: absolute;left: 0;top: 0;bottom: 0;right: 0;background: rgba(0, 0, 0, 0.3);">
                                </div>
                                <div class="sb_txt">重选{{editPositioninfo.imgId}}号仓库位置</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="but_box">
            <!-- <el-button class="cancelClass" @click="cancels">取消</el-button> -->
            <el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
        </div>
        <el-dialog :title="ckmxPopupTitle" :visible.sync="dialogVisible" custom-class="public_popup" width="60%">
            <div class="public_popup_box">
                <div class="public_popup_cell_box">
                    <div class="popup_cell_item">
                        <div class="popup_cell_name must_input">仓库名称:</div>
                        <div class="popup_cell_cont">
                            <el-input placeholder="请输入内容" v-model="addCkObj.name" class="public_input" clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="popup_cell_item">
                        <div class="popup_cell_name must_input">仓库类型:</div>
                        <div class="popup_cell_cont">
                            <el-radio :disabled="popupType == 'edit'" v-model="addCkObj.type" label="1">仓库</el-radio>
                            <el-radio :disabled="popupType == 'edit'" v-model="addCkObj.type" label="2">堆场</el-radio>
                            <el-radio :disabled="popupType == 'edit'" v-model="addCkObj.type" label="3">临时堆放点</el-radio>
                        </div>
                    </div>
                    <div class="popup_cell_item">
                        <div class="popup_cell_name must_input">负责人:</div>
                        <div class="popup_cell_cont">
                            <el-select @change="fzrChange" v-model="addCkObj.personinchargecode" class="public_input"
                                       clearable placeholder="请选择">
                                <el-option v-for="item in fzrList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="popup_cell_item">
                        <div class="popup_cell_name">备注:</div>
                        <div class="popup_cell_cont">
                            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addCkObj.describe">
                            </el-input>
                        </div>
                    </div>
                </div>
                <div class="but_box">
                    <el-button @click="dialogVisible = false" class="cancelClass">取消</el-button>
                    <el-button v-if="popupType == 'add'" @click="saveCkmx" type="primary" style="margin-left: 120px">
                        提交
                    </el-button>
                    <el-button v-if="popupType == 'edit'" @click="updateCkmx" type="primary" style="margin-left: 120px">
                        提交
                    </el-button>
                </div>
            </div>
        </el-dialog>
        <div style="height: 0;width: 0;overflow: hidden;"><input id="publicValue" type="text"></div>
    </div>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    projectId: '',
                    projectName: '',
                    isupload: false,
                    fileData: {
                        filename: '',
                        fileurl: '',
                    },
                    ckmxTableData: [],
                    positionInfo: {},
                    dialogVisible: false,
                    ckmxPopupTitle: '新增仓库明细',
                    addCkObj: {},
                    fzrList: [],
                    editIndex: '',
                    popupType: 'add',
                    isEditPosition: false,
                    editPositioninfo: {}
                };
            },
            methods: {
                checkList() {
                    layer.open({
                        type: 2,
                        title: '查看列表',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['58.71%', '55.55%'],
                        content: '/ApsPublic/publicList/checkCkList.html?' + new Date().getTime(),
                        end: function () {
                        }
                    });
                },
                mousemoves(e) {
                    var lefts = (e.offsetX / $('#drawing').width() * 100).toFixed(2)
                    var tops = (e.offsetY / $('#drawing').height() * 100).toFixed(2)
                    $('.sb_txt').css({
                        left: 'calc(' + lefts + '%  + 10px)',
                        top: 'calc(' + tops + '% + 10px)'
                    })
                },
                // 更新 修改仓库
                updateCkmx() {
                    if (this.addCkObj.name.length == 0) {
                        this.$message({
                            message: '请输入仓库名称',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.addCkObj.personinchargename.length == 0) {
                        this.$message({
                            message: '请选择负责人',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    this.$set(this.ckmxTableData, this.editIndex, JSON.parse(JSON.stringify(this.addCkObj)))
                    // 修改 去掉之前的
                    for (var i = 0; i <= $(".img_icon").length; i++)
                    {
                        var mapid = this.editIndex + 1;
                        if ($(".img_icon")[i].innerHTML.search("mapid=\"" + mapid) != -1) {
                            $($(".img_icon")[i]).remove();
                            break;
                        }
                    }
                    // 重新设置当前的
                    this.establishCk(this.addCkObj);
                    this.dialogVisible = false
                    // this.saveData();
                    this.$forceUpdate()
                    // $('.img_icon').remove()
                    // for (var j = 0; j < this.ckmxTableData.length; j++) {
                    //     this.establishCk(this.ckmxTableData[j])
                    // }
                },
                // 保存仓库明细 新增仓库的保存
                saveCkmx() {
                    if (this.addCkObj.name.length == 0) {
                        this.$message({
                            message: '请输入仓库名称',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    if (this.addCkObj.personinchargename.length == 0) {
                        this.$message({
                            message: '请选择负责人',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    this.addCkObj.addtime = timeFormat(new Date(), 1)
                    if (this.ckmxTableData.length == 0) {
                        this.addCkObj.imgId = 1
                    } else {
                        this.addCkObj.imgId = this.ckmxTableData[this.ckmxTableData.length - 1].imgId + 1
                    }
                    this.ckmxTableData.push(this.addCkObj)
                    this.dialogVisible = false
                    this.establishCk(this.addCkObj)
                },
                establishCk(objs) {
                    var that = this
                    var imgUrl = ''
                    var nodeHtml = ''
                    var isshow = objs.isAdd ? 'block' : 'block'
                    var linkcss = objs.isAdd ? 'width:194px;min-width:194px;' : 'width:194px;min-width:194px;'
                    if (objs.type == 1) {
                        imgUrl = '../img/icon33.png'
                        nodeHtml = '<div mapid="' + objs.imgId + '" style="width:36px;height:44px;top: calc(' + objs.piexly + '% - 44px);left: calc(' + objs.pixelx + '% - 18px);" class="img_icon"><img src="' + imgUrl + '" alt=""><div class="img_txt" style="top:22px;">' + objs.imgId + '</div><div style="top:52px;"  datax="' + objs.pixelx + '" datay="' + objs.piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + objs.name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + objs.name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：仓库</div><div>货架数：' + objs.goodscount + '</div></div><div class="ck_detail_right" style="' + linkcss + '"><div class="ck_detail_link_box"><div mapid="' + objs.imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + objs.imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + objs.imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + objs.personinchargename + '</div><div mapid="' + objs.imgId + '" class="ck_detail_but">编辑货架</div></div></div></div></div></div>'
                    }
                    if (objs.type == 2) {
                        imgUrl = '../img/icon23.png'
                        nodeHtml = '<div mapid="' + objs.imgId + '" style="width:37px;height:46px;top: calc(' + objs.piexly + '% - 46px);left: calc(' + objs.pixelx + '% - 19px);" class="img_icon"><img src="' + imgUrl + '" alt=""><div class="img_txt" style="top:10px;">' + objs.imgId + '</div><div style="top:56px;"  datax="' + objs.pixelx + '" datay="' + objs.piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + objs.name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + objs.name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：堆场</div></div><div class="ck_detail_right" style="' + linkcss + '"><div class="ck_detail_link_box"><div mapid="' + objs.imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + objs.imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + objs.imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + objs.personinchargename + '</div></div></div></div></div></div>'
                    }
                    if (objs.type == 3) {
                        imgUrl = '../img/icon13.png'
                        nodeHtml = '<div mapid="' + objs.imgId + '" style="width:33px;height:49px;top: calc(' + objs.piexly + '% - 49px);left: calc(' + objs.pixelx + '% - 16px);" class="img_icon"><img src="' + imgUrl + '" alt=""><div class="img_txt" style="top:8px;">' + objs.imgId + '</div><div style="top:58px;"  datax="' + objs.pixelx + '" datay="' + objs.piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + objs.name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + objs.name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：临时堆放点</div></div><div class="ck_detail_right" style="' + linkcss + '"><div class="ck_detail_link_box"><div mapid="' + objs.imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + objs.imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + objs.imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + objs.personinchargename + '</div></div></div></div></div></div>'
                    }
                    $('.img_contan').append(nodeHtml)
                    that.resPosition()
                    $('.ck_detail_but').click(function (e) {
                        if (objs.imgId == $(this).attr('mapid')) {
                            that.hjEdit(objs)
                        }
                    })
                    $('.ck_detail_link').click(function (e) {
                        var csmapid = $(this).attr('mapid')
                        if (objs.imgId == $(this).attr('mapid')) {
                            if ($(this).html() == '重选位置') {
                                $('.img_icon').removeClass('img_iconanimation')
                                $(this).parents('.img_icon').addClass('img_iconanimation')
                                that.isEditPosition = true
                                that.editPositioninfo = objs
                                $('.sb_txt').css('display', 'block')
                            }
                            if ($(this).html() == '修改') {
                                if (objs.imgId == $(this).attr('mapid')) {
                                    for (var j = 0; j < that.ckmxTableData.length; j++) {
                                        if (objs.imgId == that.ckmxTableData[j].imgId) {
                                            that.editIndex = j
                                            that.addCkObj = JSON.parse(JSON.stringify(objs))
                                            if (!objs.isAdd || objs.isSaves) {
                                                that.addCkObj.oper = 'update'
                                            }
                                            that.popupType = 'edit'
                                            that.ckmxPopupTitle = '修改仓库明细'
                                            that.dialogVisible = true
                                        }
                                    }
                                }
                            }
                            if ($(this).html() == '删除') {
                                for (var j = 0; j < that.ckmxTableData.length; j++) {
                                    if (csmapid == that.ckmxTableData[j].imgId) {
                                        if (that.ckmxTableData[j].isAdd) {

                                            that.ckmxTableData.splice(j, 1);
                                            $('.img_icon').remove()
                                            for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                that.establishCk(that.ckmxTableData[j])
                                            }
                                        } else {
                                            var row = that.ckmxTableData[j];
                                            xLoading(true, '请求中')
                                            $.ajax({
                                                type: 'post',
                                                headers: {
                                                },
                                                url: baseUrl + '/Material/CheckDeleteStorage',
                                                data: {
                                                    projectId: that.projectId,
                                                    storageId: row.id
                                                },
                                                dataType: 'json',
                                                success: function (res) {
                                                    xLoading(false)
                                                    if (!res.Success) {
                                                        that.$message({
                                                            message: res.Msg ? res.Msg : '程序错误，请重试',
                                                            type: 'error'
                                                        });
                                                        return false;
                                                    } else {
                                                        that.$confirm('是否删除此仓库?', '提示', {
                                                            confirmButtonText: '确定',
                                                            cancelButtonText: '取消',
                                                            type: 'warning'
                                                        }).then(function () {
                                                            row.oper = 'del'
                                                            xLoading(true, '正在删除')
                                                            $.ajax({
                                                                type: 'post',
                                                                headers: {
                                                                },
                                                                url: baseUrl + '/Material/SingleStorageDataManage',
                                                                data: {
                                                                    projectId: that.projectId,
                                                                    dataJson: JSON.stringify([row])
                                                                },
                                                                dataType: 'json',
                                                                success: function (res) {
                                                                    xLoading(false)
                                                                    if (!res.success) {
                                                                        that.$message({
                                                                            message: res.msg ? res.msg : '程序错误，请重试',
                                                                            type: 'error'
                                                                        });
                                                                        return false;
                                                                    }
                                                                    that.$message({
                                                                        message: '已删除',
                                                                        type: 'success'
                                                                    });
                                                                    that.getCktzData()
                                                                }
                                                            });
                                                            $('.img_icon').remove()
                                                            for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                                that.establishCk(that.ckmxTableData[j])
                                                            }
                                                        }).catch(function () {
                                                        });
                                                    }

                                                }
                                            });

                                        }
                                    }
                                }

                            }
                        }
                    })
                    $('.img_icon').hover(function (e) {
                        $(this).find('.ck_detail_title').css('display', 'none')
                        $(this).find('.ck_detail_container').css('display', 'flex')
                        $(this).find('.ck_detail_cont').css('height', $(this).find('.ck_detail_container').innerHeight() + 'px')
                        that.resPosition()
                    }, function (e) {
                        $(this).find('.ck_detail_title').css('display', 'block')
                        $(this).find('.ck_detail_container').css('display', 'none')
                        $(this).find('.ck_detail_cont').css('height', '32px')
                    })
                },
                // 鼠标点击事件
                tabImg(e) {
                    var lefts = (e.offsetX / $('#drawing').width() * 100).toFixed(2)
                    var tops = (e.offsetY / $('#drawing').height() * 100).toFixed(2)
                    var that = this
                    if (this.isEditPosition) {
                        // 对之前的修改
                        // editPositioninfo
                        this.$confirm('是否修改' + that.editPositioninfo.imgId + '号仓库位置?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            if (!that.editPositioninfo.isAdd) {
                                that.editPositioninfo.oper = 'update'
                            }
                            that.editPositioninfo['pixelx'] = lefts
                            that.editPositioninfo['piexly'] = tops
                            that.editPositioninfo.isspot = 1
                            for (var i = 0; i < that.ckmxTableData.length; i++) {
                                if (that.ckmxTableData[i].imgId == that.editPositioninfo.imgId) {
                                    that.ckmxTableData[i] = that.editPositioninfo
                                }
                            }
                            $('.img_icon').remove()
                            for (var i = 0; i < that.ckmxTableData.length; i++) {
                                that.establishCk(that.ckmxTableData[i])
                            }
                            that.editPositioninfo = {}
                            that.isEditPosition = false
                            $('.sb_txt').css('display', 'none')
                        }).catch(function () {
                            that.editPositioninfo = {}
                            that.isEditPosition = false
                            $('.sb_txt').css('display', 'none')
                            $('.img_icon').removeClass('img_iconanimation')
                        });
                        return false
                    }
                    // 新建仓库
                    this.$confirm('是否在此点创建仓库?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        that.positionInfo = {
                            left: lefts,
                            top: tops
                        }
                        that.addCkObj = {
                            oper: 'add',
                            name: '',
                            type: '1',
                            isspot: 1,
                            pixelx: lefts,
                            piexly: tops,
                            describe: '',
                            creatercode: '',
                            creatername: '',
                            personinchargecode: '',
                            personinchargename: '',
                            goodscount: 0,
                            addtime: '',
                            isAdd: true,
                            projectid: that.projectId
                        }
                        that.popupType = 'add'
                        that.ckmxPopupTitle = '新增仓库明细'
                        that.dialogVisible = true
                    }).catch(function () {
                    });
                },
                fzrChange(val) {
                    for (var i = 0; i < this.fzrList.length; i++) {
                        if (val == this.fzrList[i].id) {
                            this.addCkObj.personinchargename = this.fzrList[i].name
                        }
                    }
                    this.$forceUpdate()
                },
                cancels() {
                    var that = this
                    this.$confirm('如果退出将删除所有数据，是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        }, 100)
                    }).catch(function () {
                    });
                },
                confirms() {
                    var that = this
                    this.$confirm('保存后只能删除无材料存放的空仓库?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        that.saveData()
                    }).catch(function () {
                    });
                },
                // 保存数据 新增的仓库以及仓库的修改信息等
                saveData() {
                    var that = this
                    var dataJson = this.ckmxTableData
                    if (dataJson.length == 0) {
                        this.$message({
                            message: '请添加仓库',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    // if (that.fileData.fileid.length == 0) {
                    //     this.$message({
                    //         message: '请上传图纸',
                    //         type: 'warning',
                    //         duration: 1000
                    //     });
                    //     return false
                    // }
                    // for (var i = 0; i < this.ckmxTableData.length; i++) {
                    //     if (this.ckmxTableData[i].isspot == 0) {
                    //         this.$message({
                    //             message: '请选择仓库位置',
                    //             type: 'warning',
                    //             duration: 1000
                    //         });
                    //         return false
                    //     }
                    // }
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/StorageDataManage',
                        data: {
                            projectId: that.projectId,
                            mapId: that.fileData.fileid + ',' + that.fileData.filename,
                            dataJson: JSON.stringify(dataJson)
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            that.getCktzData();
                            // alert("需要重新获取数据 更新一下");
                            // setTimeout(function () {
                            //     var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            //     parent.layer.close(index);
                            // }, 500)
                        }
                    });
                },
                // 上传附件
                httprequest(file) {
                    var that = this
                    if (getFileType(file.file.name) != 'IMG') {
                        this.$message({
                            message: '只能上传图片',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            // for (var i = 0; i < that.ckmxTableData.length; i++) {
                            //     if (!that.ckmxTableData[i].isAdd) {
                            //         that.ckmxTableData[i].oper = 'update'
                            //     }
                            //     that.ckmxTableData[i].pixelx = ''
                            //     that.ckmxTableData[i].piexly = ''
                            //     that.ckmxTableData[i].isspot = '0'
                            // }
                            setTimeout(function () {
                                that.isupload = true
                                that.fileData = {
                                    fileid: res.data.fileId,
                                    filename: res.data.fileName,
                                    fileurl: '',
                                    uploadTime: res.data.uploadTime,
                                    userName: res.data.userName
                                }
                                var img = new Image();

                                // img.onload = function () {
                                //     that.fileData.fileurl = img.src
                                //     $('.img_icon').remove()
                                //     setTimeout(function () {
                                //         for (var j = 0; j < that.ckmxTableData.length; j++) {
                                //             that.establishCk(that.ckmxTableData[j])
                                //         }
                                //     }, 100);
                                // }
                                img.onload = function () {
                                    var widths = img.naturalWidth
                                    var heights = img.naturalHeight
                                    if (widths > $('.img_box').width()) {
                                        $('.img_cont').css('width', '100%')
                                    } else {
                                        $('.img_cont').css('width', widths + 'px')
                                    }
                                    that.fileData.fileurl = img.src
                                    setTimeout(function () {
                                        $('.img_icon').remove()
                                        for (var i = 0; i < that.ckmxTableData.length; i++) {
                                            if (that.ckmxTableData[i].isspot == 1) {
                                                var imgUrl = ''
                                                var nodeHtml = ''
                                                var isshow = that.ckmxTableData[i].isAdd ? 'block' : 'block'
                                                var linkcss = that.ckmxTableData[i].isAdd ? 'width:194px;min-width:194px;' : 'width:194px;min-width:194px;'
                                                if (that.ckmxTableData[i].type == 1) {
                                                    imgUrl = '../img/icon33.png'
                                                    nodeHtml = '<div mapid="' + that.ckmxTableData[i].imgId + '" style="width:36px;height:44px;top: calc(' + that.ckmxTableData[i].piexly + '% - 44px);left: calc(' + that.ckmxTableData[i].pixelx + '% - 18px);" class="img_icon"><img mapid="' + that.ckmxTableData[i].imgId + '" src="' + imgUrl + '" alt=""><div class="img_txt" style="top:22px;">' + that.ckmxTableData[i].imgId + '</div><div style="top:52px;" datax="' + that.ckmxTableData[i].pixelx + '" datay="' + that.ckmxTableData[i].piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + that.ckmxTableData[i].name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + that.ckmxTableData[i].name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：仓库</div><div>货架数：' + that.ckmxTableData[i].goodscount + '</div></div><div class="ck_detail_right"  style="' + linkcss + '"><div class="ck_detail_link_box"><div mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + that.ckmxTableData[i].personinchargename + '</div><div mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_but">编辑货架</div></div></div></div></div></div>'
                                                }
                                                if (that.ckmxTableData[i].type == 2) {
                                                    imgUrl = '../img/icon23.png'
                                                    nodeHtml = '<div mapid="' + that.ckmxTableData[i].imgId + '" style="width:37px;height:46px;top: calc(' + that.ckmxTableData[i].piexly + '% - 46px);left: calc(' + that.ckmxTableData[i].pixelx + '% - 19px);" class="img_icon"><img mapid="' + that.ckmxTableData[i].imgId + '" src="' + imgUrl + '" alt=""><div class="img_txt" style="top:10px;">' + that.ckmxTableData[i].imgId + '</div><div style="top:56px;" datax="' + that.ckmxTableData[i].pixelx + '" datay="' + that.ckmxTableData[i].piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + that.ckmxTableData[i].name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + that.ckmxTableData[i].name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：堆场</div></div><div class="ck_detail_right"  style="' + linkcss + '"><div  class="ck_detail_link_box"><div mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + that.ckmxTableData[i].personinchargename + '</div></div></div></div></div></div>'
                                                }
                                                if (that.ckmxTableData[i].type == 3) {
                                                    imgUrl = '../img/icon13.png'
                                                    nodeHtml = '<div mapid="' + that.ckmxTableData[i].imgId + '" style="width:33px;height:49px;top: calc(' + that.ckmxTableData[i].piexly + '% - 49px);left: calc(' + that.ckmxTableData[i].pixelx + '% - 16px);" class="img_icon"><img mapid="' + that.ckmxTableData[i].imgId + '" src="' + imgUrl + '" alt=""><div class="img_txt" style="top:8px;">' + that.ckmxTableData[i].imgId + '</div><div style="top:58px;" datax="' + that.ckmxTableData[i].pixelx + '" datay="' + that.ckmxTableData[i].piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + that.ckmxTableData[i].name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + that.ckmxTableData[i].name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：临时堆放点</div></div><div class="ck_detail_right"  style="' + linkcss + '"><div  class="ck_detail_link_box"><div mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + that.ckmxTableData[i].imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + that.ckmxTableData[i].personinchargename + '</div></div></div></div></div></div>'
                                                }
                                                $('.img_contan').append(nodeHtml)
                                            }
                                        }
                                        // 对图上的各个仓库进行 点击事件绑定
                                        $('.ck_detail_but').click(function (e) {
                                            e.stopPropagation();
                                            for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                    that.hjEdit(that.ckmxTableData[i])
                                                }
                                            }
                                        })
                                        $('.img_icon').click(function (e) {
                                            for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                    that.openckmx(that.ckmxTableData[i])
                                                }
                                            }
                                        })
                                        $('.ck_detail_link').click(function (e) {
                                            e.stopPropagation();
                                            var csmapid = $(this).attr('mapid')
                                            if ($(this).html() == '重选位置') {
                                                for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                    if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                        $('.img_icon').removeClass('img_iconanimation')
                                                        $(this).parents('.img_icon').addClass('img_iconanimation')
                                                        that.isEditPosition = true
                                                        that.editPositioninfo = that.ckmxTableData[i]
                                                        $('.sb_txt').css('display', 'block')
                                                    }
                                                }
                                            }
                                            if ($(this).html() == '修改') {
                                                for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                    if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                        that.editIndex = i
                                                        that.addCkObj = JSON.parse(JSON.stringify(that.ckmxTableData[i]))
                                                        if (!that.ckmxTableData[i].isAdd || that.ckmxTableData[i].isSaves) {
                                                            that.addCkObj.oper = 'update'
                                                        }
                                                        that.popupType = 'edit'
                                                        that.ckmxPopupTitle = '修改仓库明细'
                                                        that.dialogVisible = true
                                                    }
                                                }
                                            }
                                            if ($(this).html() == '删除') {
                                                for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                    if (csmapid == that.ckmxTableData[j].imgId) {
                                                        if (that.ckmxTableData[j].isAdd) {
                                                            that.ckmxTableData.splice(j, 1);
                                                            $('.img_icon').remove()
                                                            for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                                that.establishCk(that.ckmxTableData[j]);
                                                                $('.img_icon').remove()
                                                                for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                                    that.establishCk(that.ckmxTableData[j])
                                                                }
                                                            }
                                                        } else {
                                                            var row = that.ckmxTableData[j];
                                                            xLoading(true, '请求中')
                                                            $.ajax({
                                                                type: 'post',
                                                                headers: {
                                                                },
                                                                url: baseUrl + '/Material/CheckDeleteStorage',
                                                                data: {
                                                                    projectId: that.projectId,
                                                                    storageId: row.id
                                                                },
                                                                dataType: 'json',
                                                                success: function (res) {
                                                                    xLoading(false)
                                                                    if (!res.Success) {
                                                                        that.$message({
                                                                            message: res.Msg ? res.Msg : '程序错误，请重试',
                                                                            type: 'error'
                                                                        });
                                                                        return false;
                                                                    } else {
                                                                        that.$confirm('是否删除此仓库?', '提示', {
                                                                            confirmButtonText: '确定',
                                                                            cancelButtonText: '取消',
                                                                            type: 'warning'
                                                                        }).then(function () {
                                                                            row.oper = 'del'
                                                                            xLoading(true, '正在删除')
                                                                            $.ajax({
                                                                                type: 'post',
                                                                                headers: {
                                                                                },
                                                                                url: baseUrl + '/Material/SingleStorageDataManage',
                                                                                data: {
                                                                                    projectId: that.projectId,
                                                                                    dataJson: JSON.stringify([row])
                                                                                },
                                                                                dataType: 'json',
                                                                                success: function (res) {
                                                                                    xLoading(false)
                                                                                    if (!res.success) {
                                                                                        that.$message({
                                                                                            message: res.msg ? res.msg : '程序错误，请重试',
                                                                                            type: 'error'
                                                                                        });
                                                                                        return false;
                                                                                    }
                                                                                    that.$message({
                                                                                        message: '已删除',
                                                                                        type: 'success'
                                                                                    });
                                                                                    that.getCktzData()
                                                                                }
                                                                            });
                                                                            $('.img_icon').remove()
                                                                            for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                                                that.establishCk(that.ckmxTableData[j])
                                                                            }
                                                                        }).catch(function () {
                                                                        });
                                                                    }

                                                                }
                                                            });

                                                        }
                                                    }
                                                }

                                            }
                                        })
                                        $('.img_icon').hover(function (e) {
                                            $(this).find('.ck_detail_title').css('display', 'none')
                                            $(this).find('.ck_detail_container').css('display', 'flex')
                                            $(this).find('.ck_detail_cont').css('height', $(this).find('.ck_detail_container').innerHeight() + 'px')
                                            that.resPosition()
                                        }, function (e) {
                                            $(this).find('.ck_detail_title').css('display', 'block')
                                            $(this).find('.ck_detail_container').css('display', 'none')
                                            $(this).find('.ck_detail_cont').css('height', '32px')
                                        })
                                        // datay
                                        that.resPosition()
                                    }, 100);
                                }
                                img.src = res.data.ossUrl;
                                // that.setDrawimgBox(file.file)
                            }, 500);
                        }
                    });
                },
                // 新建仓库之后 如果进行编辑货架操作 需要先进行仓库保存
                hjEdit(row) {
                    var that = this
                    if (row.isAdd && !row.isSaves) {
                        this.$confirm('编辑前需要保存仓库，是否保存仓库?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(function () {
                            that.saveDgCk(row)
                        }).catch(function () {
                        });
                        return false
                    }
                    layer.open({
                        type: 2,
                        title: '编辑' + row.name + '货架',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['47.71%', '55.55%'],
                        content: 'editHj.html?storageId=' + row.id + '&projectId=' + that.projectId + '&ckName=' + encodeURIComponent(row.name) + '&' + new Date().getTime(),
                        end: function () {
                            that.getCktzData()
                        }
                    });
                },
                // 保存单挑仓库
                saveDgCk(row) {
                    var that = this
                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/SingleStorageDataManage',
                        data: {
                            projectId: that.projectId,
                            dataJson: JSON.stringify([row])
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            row.isSaves = true
                            row.id = res.data
                            setTimeout(function () {
                                layer.open({
                                    type: 2,
                                    title: '编辑' + row.name + '货架',
                                    shadeClose: true,
                                    shade: 0.4,
                                    skin: 'popup_layui',
                                    area: ['47.71%', '55.55%'],
                                    content: 'editHj.html?storageId=' + res.data + '&projectId=' + that.projectId + '&ckName=' + encodeURIComponent(row.name) + '&' + new Date().getTime(),
                                    end: function () {
                                        that.getCktzData()
                                    }
                                });
                            }, 500)
                        }
                    });
                },
                // 获取工程图纸
                getCktzData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetProjectMapId',
                        data: {
                            projectId: that.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                xLoading(false)
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.getCkmxList(res.data)
                        }
                    });
                },
                // 将获取到的图片的值 进行处理
                // 获取仓库的数据列表
                getCkmxList(files) {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetStorageInfos',
                        data: {
                            projectId: that.projectId,
                            isUse: '1'
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.ckmxTableData = []
                            $('.img_icon').remove()
                            setTimeout(function () {
                                // 将保存图片的字段进行相应的处理
                                if (files.length > 0) {
                                    that.isupload = true
                                    that.fileData = {
                                        fileid: files.split(',')[0],
                                        filename: files.split(',')[1],
                                        fileurl: ''
                                    }
                                    var img = new Image();
                                    img.onload = function () {
                                        var widths = img.naturalWidth
                                        var heights = img.naturalHeight
                                        if (widths > $('.img_box').width()) {
                                            $('.img_cont').css('width', '100%')
                                        } else {
                                            $('.img_cont').css('width', widths + 'px')
                                        }
                                        that.fileData.fileurl = img.src
                                        setTimeout(function () {
                                            for (var i = 0; i < res.data.length; i++) {
                                                if (res.data[i].isspot == 1) {
                                                    var imgUrl = ''
                                                    var nodeHtml = ''
                                                    var isshow = res.data[i].isAdd ? 'block' : 'block'
                                                    var linkcss = res.data[i].isAdd ? 'width:194px;min-width:194px;' : 'width:194px;min-width:194px;'
                                                    if (res.data[i].type == 1) {
                                                        imgUrl = '../img/icon33.png'
                                                        nodeHtml = '<div mapid="' + res.data[i].imgId + '" style="width:36px;height:44px;top: calc(' + res.data[i].piexly + '% - 44px);left: calc(' + res.data[i].pixelx + '% - 18px);" class="img_icon"><img mapid="' + res.data[i].imgId + '" src="' + imgUrl + '" alt=""><div class="img_txt" style="top:22px;">' + res.data[i].imgId + '</div><div style="top:52px;" datax="' + res.data[i].pixelx + '" datay="' + res.data[i].piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + res.data[i].name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + res.data[i].name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：仓库</div><div>货架数：' + res.data[i].goodscount + '</div></div><div class="ck_detail_right"  style="' + linkcss + '"><div class="ck_detail_link_box"><div mapid="' + res.data[i].imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + res.data[i].imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + res.data[i].imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + res.data[i].personinchargename + '</div><div mapid="' + res.data[i].imgId + '" class="ck_detail_but">编辑货架</div></div></div></div></div></div>'
                                                    }
                                                    if (res.data[i].type == 2) {
                                                        imgUrl = '../img/icon23.png'
                                                        nodeHtml = '<div mapid="' + res.data[i].imgId + '" style="width:37px;height:46px;top: calc(' + res.data[i].piexly + '% - 46px);left: calc(' + res.data[i].pixelx + '% - 19px);" class="img_icon"><img mapid="' + res.data[i].imgId + '" src="' + imgUrl + '" alt=""><div class="img_txt" style="top:10px;">' + res.data[i].imgId + '</div><div style="top:56px;" datax="' + res.data[i].pixelx + '" datay="' + res.data[i].piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + res.data[i].name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + res.data[i].name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：堆场</div></div><div class="ck_detail_right"  style="' + linkcss + '"><div  class="ck_detail_link_box"><div mapid="' + res.data[i].imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + res.data[i].imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + res.data[i].imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + res.data[i].personinchargename + '</div></div></div></div></div></div>'
                                                    }
                                                    if (res.data[i].type == 3) {
                                                        imgUrl = '../img/icon13.png'
                                                        nodeHtml = '<div mapid="' + res.data[i].imgId + '" style="width:33px;height:49px;top: calc(' + res.data[i].piexly + '% - 49px);left: calc(' + res.data[i].pixelx + '% - 16px);" class="img_icon"><img mapid="' + res.data[i].imgId + '" src="' + imgUrl + '" alt=""><div class="img_txt" style="top:8px;">' + res.data[i].imgId + '</div><div style="top:58px;" datax="' + res.data[i].pixelx + '" datay="' + res.data[i].piexly + '" class="ck_detail_box"><div class="ck_detail_arrow"></div><div class="ck_detail_cont"><div class="ck_detail_title">' + res.data[i].name + '</div><div class="ck_detail_container"><div class="ck_detail_left"><div style="white-space: nowrap;" >' + res.data[i].name + '</div><div style="white-space: nowrap;margin:10px 0;" >类型：临时堆放点</div></div><div class="ck_detail_right"  style="' + linkcss + '"><div  class="ck_detail_link_box"><div mapid="' + res.data[i].imgId + '" class="ck_detail_link">修改</div><div style="border-left: 1px solid #BBBBC5;" mapid="' + res.data[i].imgId + '" class="ck_detail_link">重选位置</div><div style="border-left: 1px solid #BBBBC5;display:' + isshow + ';" mapid="' + res.data[i].imgId + '" class="ck_detail_link">删除</div></div><div style="margin:10px 0;">负责人：' + res.data[i].personinchargename + '</div></div></div></div></div></div>'
                                                    }
                                                    $('.img_contan').append(nodeHtml)
                                                }
                                            }
                                            // 对图上的各个仓库进行 点击事件绑定
                                            $('.ck_detail_but').click(function (e) {
                                                e.stopPropagation();
                                                for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                    if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                        that.hjEdit(that.ckmxTableData[i])
                                                    }
                                                }
                                            })
                                            $('.img_icon').click(function (e) {
                                                for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                    if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                        that.openckmx(that.ckmxTableData[i])
                                                    }
                                                }
                                            })
                                            $('.ck_detail_link').click(function (e) {
                                                e.stopPropagation();
                                                var csmapid = $(this).attr('mapid')
                                                if ($(this).html() == '重选位置') {
                                                    for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                        if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                            $('.img_icon').removeClass('img_iconanimation')
                                                            $(this).parents('.img_icon').addClass('img_iconanimation')
                                                            that.isEditPosition = true
                                                            that.editPositioninfo = that.ckmxTableData[i]
                                                            $('.sb_txt').css('display', 'block')
                                                        }
                                                    }
                                                }
                                                if ($(this).html() == '修改') {
                                                    for (var i = 0; i < that.ckmxTableData.length; i++) {
                                                        if (that.ckmxTableData[i].imgId == $(this).attr('mapid')) {
                                                            that.editIndex = i
                                                            that.addCkObj = JSON.parse(JSON.stringify(that.ckmxTableData[i]))
                                                            if (!that.ckmxTableData[i].isAdd || that.ckmxTableData[i].isSaves) {
                                                                that.addCkObj.oper = 'update'
                                                            }
                                                            that.popupType = 'edit'
                                                            that.ckmxPopupTitle = '修改仓库明细'
                                                            that.dialogVisible = true
                                                        }
                                                    }
                                                }
                                                if ($(this).html() == '删除') {
                                                    for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                        if (csmapid == that.ckmxTableData[j].imgId) {
                                                            if (that.ckmxTableData[j].isAdd) {
                                                                that.ckmxTableData.splice(j, 1);
                                                                $('.img_icon').remove()
                                                                for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                                    that.establishCk(that.ckmxTableData[j])
                                                                }
                                                            } else {
                                                                var row = that.ckmxTableData[j];
                                                                xLoading(true, '请求中')
                                                                $.ajax({
                                                                    type: 'post',
                                                                    headers: {
                                                                    },
                                                                    url: baseUrl + '/Material/CheckDeleteStorage',
                                                                    data: {
                                                                        projectId: that.projectId,
                                                                        storageId: row.id
                                                                    },
                                                                    dataType: 'json',
                                                                    success: function (res) {
                                                                        xLoading(false)
                                                                        if (!res.Success) {
                                                                            that.$message({
                                                                                message: res.Msg ? res.Msg : '程序错误，请重试',
                                                                                type: 'error'
                                                                            });
                                                                            return false;
                                                                        } else {
                                                                            that.$confirm('是否删除此仓库?', '提示', {
                                                                                confirmButtonText: '确定',
                                                                                cancelButtonText: '取消',
                                                                                type: 'warning'
                                                                            }).then(function () {
                                                                                row.oper = 'del'
                                                                                xLoading(true, '正在删除')
                                                                                $.ajax({
                                                                                    type: 'post',
                                                                                    headers: {
                                                                                    },
                                                                                    url: baseUrl + '/Material/SingleStorageDataManage',
                                                                                    data: {
                                                                                        projectId: that.projectId,
                                                                                        dataJson: JSON.stringify([row])
                                                                                    },
                                                                                    dataType: 'json',
                                                                                    success: function (res) {
                                                                                        xLoading(false)
                                                                                        if (!res.success) {
                                                                                            that.$message({
                                                                                                message: res.msg ? res.msg : '程序错误，请重试',
                                                                                                type: 'error'
                                                                                            });
                                                                                            return false;
                                                                                        }
                                                                                        that.$message({
                                                                                            message: '已删除',
                                                                                            type: 'success'
                                                                                        });
                                                                                        that.getCktzData()
                                                                                    }
                                                                                });
                                                                                $('.img_icon').remove()
                                                                                for (var j = 0; j < that.ckmxTableData.length; j++) {
                                                                                    that.establishCk(that.ckmxTableData[j])
                                                                                }
                                                                            }).catch(function () {
                                                                            });
                                                                        }

                                                                    }
                                                                });

                                                            }
                                                        }
                                                    }
                                                }
                                            })
                                            $('.img_icon').hover(function (e) {
                                                $(this).find('.ck_detail_title').css('display', 'none')
                                                $(this).find('.ck_detail_container').css('display', 'flex')
                                                $(this).find('.ck_detail_cont').css('height', $(this).find('.ck_detail_container').innerHeight() + 'px')
                                                that.resPosition()
                                            }, function (e) {
                                                $(this).find('.ck_detail_title').css('display', 'block')
                                                $(this).find('.ck_detail_container').css('display', 'none')
                                                $(this).find('.ck_detail_cont').css('height', '32px')
                                            })
                                            // datay
                                            that.resPosition()
                                        }, 100);
                                    }
                                    img.src = baseUrl + '/DataInput/FileService?method=DownloadFile&fileid=' + files.split(',')[0];
                                    // that.setDrawimgBox(img.src, 1)
                                }
                                for (var i = 0; i < res.data.length; i++) {
                                    res.data[i].imgId = i + 1
                                }
                                that.ckmxTableData = res.data

                            }, 500)
                        }
                    });
                },
                openckmx(row) {
                    var that = this
                    layer.open({
                        type: 2,
                        title: row.name + '-仓库明细',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['66%', '55.55%'],
                        content: '/ApsPublic/publicList/ckClList.html?storageId=' + row.id + '&projectId=' + that.projectId + '&ckName=' + encodeURIComponent(row.name) + '&' + new Date().getTime(),
                        end: function () {
                        }
                    });
                },
                getProjectData() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetProjectData',
                        data: {
                            projectId: that.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                xLoading(false)
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.projectId = res.data[0].projectid;
                            that.projectName = res.data[0].name;
                        }
                    })
                },
                resPosition() {
                    var allwidth = $('#drawing').width()
                    var allheight = $('#drawing').height()
                    for (var i = 0; i < $('.ck_detail_box').length; i++) {
                        var isxBig = (parseFloat(allwidth * $('.ck_detail_box').eq(i).attr('datax') / 100) + parseFloat($('.ck_detail_box').eq(i).innerWidth() / 2)) - allwidth
                        var istBig = (parseFloat(allheight * $('.ck_detail_box').eq(i).attr('datay') / 100) + parseFloat(180 + 7)) - allheight
                        var islefbig = parseFloat($('.ck_detail_box').eq(i).innerWidth() / 2) - parseFloat(allwidth * $('.ck_detail_box').eq(i).attr('datax') / 100)
                        if (isxBig > 0) {
                            $('.ck_detail_box').eq(i).css({
                                right: '4px',
                                left: 'auto',
                                transform: 'none'
                            })
                            $('.ck_detail_box').eq(i).find('.ck_detail_arrow').css({
                                left: 'auto',
                                right: '5px',
                                transform: 'none'
                            })
                        }
                        if (islefbig > 0) {
                            $('.ck_detail_box').eq(i).css({
                                left: '4px',
                                transform: 'none'
                            })
                            $('.ck_detail_box').eq(i).find('.ck_detail_arrow').css({
                                left: '5px',
                                transform: 'none'
                            })
                        }
                        if (istBig > 0) {
                            $('.ck_detail_box').eq(i).css({
                                top: 'auto',
                                bottom: '58px'
                            })
                            $('.ck_detail_box').eq(i).find('.ck_detail_arrow').css({
                                bottom: '-7px',
                                top: 'auto',
                                transform: 'rotate(180deg)'
                            })
                        }
                    }
                },
                setDrawimgBox(file, types) {

                    var that = this;
                    if (types == 1) {
                        var img = new Image();
                        img.onload = function () {
                            var widths = img.naturalWidth
                            var heights = img.naturalHeight
                            if (widths > $('.img_box').width()) {
                                $('.img_cont').css('width', '100%')
                            } else {
                                $('.img_cont').css('width', widths + 'px')
                            }
                        }
                        img.src = file;
                        return false
                    }
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(file); //根据图片路径读取图片
                    fileReader.onload = function (e) {
                        var base64 = this.result;
                        var img = new Image();
                        img.onload = function () {
                            var widths = img.naturalWidth
                            var heights = img.naturalHeight
                            if (widths > $('.img_box').width()) {
                                $('.img_cont').css('width', '100%')
                            } else {
                                $('.img_cont').css('width', widths + 'px')
                            }
                        }
                        img.src = base64;
                    }
                },
                getFzrList() {
                    var that = this
                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                        },
                        url: baseUrl + '/Material/GetFzrList',
                        data: {
                            projectId: that.projectId
                        },
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                xLoading(false)
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.fzrList = res.data;
                        }
                    })
                }
            },            
            mounted() {
                this.showApp = true;
                var that = this
                // var that = this
                // setTimeout(function() {
                //     that.$refs.detailbox.style.height = 'auto'
                //     that.$refs.detailbox.style.minHeight = '400px'
                // }, 10)
                this.projectId = getQuerys('projectId')
                this.getCktzData()
                this.getProjectData();
                this.getFzrList();
            }
        });
    </script>
</body>
<style>
    .content_box {
        padding: 2.77vh 2.08vw 4px;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .but_box {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        align-items: flex-end;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
    }

        .but_box .el-button {
            width: 120px;
            height: 32px;
            border-radius: 5px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .title_but {
        padding-left: 10px;
        flex: 1;
    }

    .cell_txt {
        color: #000000;
        font-weight: bold;
        line-height: 1;
    }

        .cell_txt span {
            padding-left: 10px;
        }

    .cell_box {
        display: flex;
        align-items: center;
        line-height: 1;
        margin-top: 2.77vh;
    }

    .cell_cont {
        margin-left: 10px;
        height: 32px;
        background: #E3E3E3;
        border: 1px solid #BBBBC5;
        border-radius: 5px;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .title_box {
        display: flex;
        align-items: center;
        margin-top: 2.77vh;
        padding-bottom: 10px;
    }

    .file_but {
        display: flex;
        justify-content: space-between;
    }

    .icon_type_box {
        display: flex;
        align-items: center;
    }

        .icon_type_box img {
            margin-left: 20px;
        }

        .icon_type_box div {
            margin-left: 8px;
        }

    .file_box {
        width: 100%;
        height: 100%;
        min-height: 300px;
    }

    .file_upload-demo {
        width: 100%;
        height: 100%;
    }

    .file_box .el-upload {
        width: 100%;
        height: 100%;
    }

    .file_box .el-upload-dragger {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

        .file_box .el-upload-dragger .el-icon-upload {
            margin-top: 0;
        }

    .img_box {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        /* overflow: auto; */
        position: relative;
        padding: 20px;
        padding-top: 40px;
        min-height: 300px;
    }

    .img_icon {
        position: absolute;
        cursor: pointer;
        transition: all 0.5s;
        z-index: 1;
    }

    .img_iconanimation {
        animation: myfirst 0.8s;
        animation-iteration-count: infinite;
    }

    @keyframes myfirst {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.2;
        }
    }

    .img_txt {
        position: absolute;
        left: 50%;
        color: #fff;
        font-size: 16px;
        transform: translateX(-50%);
    }

    .ck_detail_title {
        white-space: nowrap;
        height: 32px;
        padding: 0 10px;
        line-height: 32px;
    }

    .ck_detail_box {
        position: absolute;
        background: #fff;
        border-radius: 5px;
        left: 50%;
        transform: translateX(-50%);
        /* box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2); */
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border: 1px solid #e4e7ed;
    }

    .ck_detail_arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #fff;
        top: -7px;
        left: calc(50% - 7px);
    }

    .img_icon:hover {
        z-index: 2;
    }

    .ck_detail_cont {
        height: 32px;
        overflow: hidden;
        transition: all 0.5s;
    }

    .ck_detail_container {
        display: none;
        padding: 10px;
        padding-bottom: 10px;
        overflow: hidden;
    }

    .ck_detail_left {
    }

    .ck_detail_right {
        width: 194px;
        min-width: 194px;
        padding-left: 20px;
    }

    .ck_detail_link_box {
        display: flex;
        align-items: center;
    }

    .ck_detail_link {
        color: #5574D7;
        padding: 0 10px;
    }

    .ck_detail_but {
        background: #5574D7;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        height: 24px;
        border-radius: 5px;
        width: 100px;
        justify-content: center;
    }

    .ck_detail_cont {
        overflow: hidden;
    }

    .public_popup_box {
        height: 100%;
    }

    .public_popup_cell_box {
        padding: 2.77vh 2.08vw 0;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .public_popup {
        /* height: 70vh; */
        height: 400px;
    }

    .popup_cell_item {
        display: flex;
        margin-bottom: 20px;
    }

    .popup_cell_name {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        line-height: 32px;
    }

    .popup_cell_cont {
        /* padding-right: 100px; */
        display: flex;
        align-items: center;
        flex: 1;
    }

    .el-radio {
        margin-right: 1.56vw;
    }

    .sb_txt {
        position: absolute;
        left: 0;
        top: 0;
        padding: 4px 10px;
        background: #fff;
        color: #333;
        border: 1px solid #ddd;
        display: none;
    }

    .el-radio__input.is-disabled + span.el-radio__label {
        color: #606266
    }

    .el-radio__input.is-checked + .el-radio__label {
        color: #5574D7 !important;
    }

    .el-radio__input.is-disabled .el-radio__inner,
    .el-radio__input.is-disabled.is-checked .el-radio__inner {
        background-color: #FFF;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #5574D7 !important;
        background: #5574D7 !important;
    }

    .el-radio__input.is-disabled .el-radio__inner::after {
        background-color: #FFF;
    }

    .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
        background-color: #FFF;
    }
</style>

</html>